<script setup lang="ts">
import { useRouter } from 'vue-router'
// 一定有的功能：返回图标，返回效果，固定定位（组件内部实现）
// 使用组件时候才能确定的功能：标题，右侧文字，点击右侧文字行为（props传入）
const props = defineProps<{
  title?: string,
  rightText?: string,
  // 外部传递一个处理函数进来
  back?: () => void
}>()

// 我们规定外面使用该组件时的自定义事件名为click-right
const emit = defineEmits<{
  (e: 'click-right'): void
}>()

const router = useRouter()

// 点击左侧按钮：如果有上一次历史记录，会回退到上一次历史记录，如果没有，应该回到首页
const onClickLeft = () => {
  // 如果外面传递了back这个porps
  if (props.back) {
    // 交个外部传递的自定义函数来处理
    return props.back()
  }
  if (window.history.state.back) {
    router.back()
  } else {
    router.push('/')
  }
}
// 点击右侧按钮：具体做什么事情，应该由使用组件的地方来确定
const onClickRight = () => {
  // 触发使用该组件的自定义事件来完成点击的行为
  emit('click-right')
}

</script>

<template>
  <van-nav-bar fixed :title="title" :right-text="rightText" left-arrow @click-left="onClickLeft"
    @click-right="onClickRight" />
</template>

<style lang="scss" scoped>
// 通过样式穿透修改van-nav-bar组件的左箭头和右边文字的样式效果
::v-deep() {
  .van-nav-bar {
    &__arrow {
      font-size: 18px;
      color: var(--cp-text1);
    }

    &__text {
      font-size: 15px;
      color: var(--cp-primary);
    }
  }
}
</style>
